<template>
	<view class="content">
		<!--图片上传-->
		<view class="content_1">
			<view class="upload_view">
				<view class="upload_title">封面图</view>
				<view class="title_line"></view>
				<!-- 传图片类型: fengmian, dating, fangjian, weishengjian -->
				<view class="upload_box">
					<block v-for="(dataInfo, index) in CreateCoverPhoto" :key='index'>
						<image class="uploadimg_view" :src="dataInfo.show_url"></image>
					</block>
					<view class="uploadimg_view" @click="imageRequest('fengmian')" v-if="CreateCoverPhoto.length < 1">
						<image class="uploadimg" src="../../../../../static/mine/owner/photo.svg"></image>
					</view>
				</view>
			</view>
			<view class="upload_view">
				<view class="upload_title">大厅</view>
				<view class="title_line"></view>
				<view class="upload_box">
					<block v-for="(dataInfo, index) in CreateHallPhoto" :key='index'>
						<image class="uploadimg_view" :src="dataInfo.show_url"></image>
					</block>
					<view class="uploadimg_view" @click="imageRequest('dating')" v-if="CreateHallPhoto.length < 5">
						<image class="uploadimg" src="../../../../../static/mine/owner/photo.svg"></image>
					</view>
				</view>
			</view>
			<view class="upload_view">
				<view class="upload_title">房间</view>
				<view class="title_line"></view>
				<view class="upload_box">
<view class="uploadimg_view" @click="fangjianupload1" v-if="addimgstate >= 1 && (fangjianstate1 == '' || fangjianstate1 == '-3' || fangjianstate1 == '0')">
<image class="uploadimg" src="../../../../../static/mine/owner/photo.svg"></image>
					</view>
					<image class="uploadimg_view" @click="fangjianupload2" v-if="addimgstate >= 1 && fangjianstate1 == '1'" :src="fangjianimg1"></image>
					<view class="uploadimg_view" @click="fangjianupload2" v-if="addimgstate >= 2 && (fangjianstate2 == '' || fangjianstate2 == '-3' || fangjianstate2 == '0')">
						<image class="uploadimg" src="../../../../../static/mine/owner/photo.svg"></image>
					</view>
					<image class="uploadimg_view" @click="fangjianupload3" v-if="addimgstate >= 2 && fangjianstate2 == '1'" :src="fangjianimg2"></image>
					<view class="uploadimg_view" @click="fangjianupload3" v-if="addimgstate >= 3 && (fangjianstate3 == '' || fangjianstate3 == '-3' || fangjianstate3 == '0')">
						<image class="uploadimg" src="../../../../../static/mine/owner/photo.svg"></image>
					</view>
					<image class="uploadimg_view" @click="fangjianupload4" v-if="addimgstate >= 3 && fangjianstate3 == '1'" :src="fangjianimg3"></image>
					<view class="uploadimg_view" @click="fangjianupload4" v-if="addimgstate >= 4 && (fangjianstate4 == '' || fangjianstate4 == '-3' || fangjianstate4 == '0')">
						<image class="uploadimg" src="../../../../../static/mine/owner/photo.svg"></image>
					</view>
					<image class="uploadimg_view" @click="fangjianupload5" v-if="addimgstate >= 4 && fangjianstate4 == '1'" :src="fangjianimg4"></image>
					<view class="uploadimg_view" @click="fangjianupload5" v-if="addimgstate >= 5 && (fangjianstate5 == '' || fangjianstate5 == '-3' || fangjianstate5 == '0')">
						<image class="uploadimg" src="../../../../../static/mine/owner/photo.svg"></image>
					</view>
					<image class="uploadimg_view" @click="fangjianupload1" v-if="addimgstate >= 5 && fangjianstate5 == '1'" :src="fangjianimg5"></image>
					<view class="uploadimg_view" @click="addupload" v-if="showaddimg == '1'">
						<image class="uploadimg" src="../../../../../static/mine/owner/addphoto.svg"></image>
					</view>
				</view>
			</view>
			<view class="upload_view">
				<view class="upload_title">卫生间（选填）</view>
				<view class="title_line"></view>
				<view class="upload_box">
					<block v-for="(dataInfo, index) in CreateToiletPhoto" :key='index'>
						<image class="uploadimg_view" :src="dataInfo.show_url"></image>
					</block>
					<view class="uploadimg_view" @click="imageRequest('weishengjian')" v-if="CreateToiletPhoto.length < 5">
						<image class="uploadimg" src="../../../../../static/mine/owner/photo.svg"></image>
					</view>
				</view>
			</view>
		</view>
		<!--下一步-->
		<view class="content_2">
			<view class="next" @click="toNext">下一步</view>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				showaddimg: '0',
				addimgstate: '1',
				fengmianstate: '',
				fengmianimg: '',
				datingstate: '',
				datingimg: '',
				weishenghjianstate: '',
				weishengjianimg: '',
				fangjianstate1: '',
				fangjianimg1: '',
				fangjianstate2: '',
				fangjianimg2: '',
				fangjianstate3: '',
				fangjianimg3: '',
				fangjianstate4: '',
				fangjianimg4: '',
				fangjianstate5: '',
				fangjianimg5: '',
				houseimg: [],
				roomimg: [],
				roomarr: [],
				//封面图片
				CreateCoverPhoto: [],
				//大厅图片
				CreateHallPhoto: [],
				//卫生间图片
				CreateToiletPhoto: [],
			}
		},
		methods: {
			//跳转下一步基础信息
			toNext: function() {
				if (this.CreateCoverPhoto == '') {
					uni.showToast({
						title: '未上传封面',
						position: 'center',
						icon: 'none'
					})
				} else if (this.CreateHallPhoto == '') {
					uni.showToast({
						title: '未上传大厅',
						position: 'center',
						icon: 'none'
					})
				} else if (this.CreateToiletPhoto == '') {
					uni.showToast({
						title: '未上传卫生间',
						position: 'center',
						icon: 'none'
					})
				} else if (this.room1 == undefined && this.addimgstate == '1') {
					uni.showToast({
						title: '未上传房间',
						position: 'center',
						icon: 'none'
					})
				} else if (this.room2 == undefined && this.addimgstate == '2') {
					uni.showToast({
						title: '未上传房间',
						position: 'center',
						icon: 'none'
					})
				} else if (this.room3 == undefined && this.addimgstate == '3') {
					uni.showToast({
						title: '未上传房间',
						position: 'center',
						icon: 'none'
					})
				} else if (this.room4 == undefined && this.addimgstate == '4') {
					uni.showToast({
						title: '未上传房间',
						position: 'center',
						icon: 'none'
					})
				} else if (this.room5 == undefined && this.addimgstate == '5') {
					uni.showToast({
						title: '未上传房间',
						position: 'center',
						icon: 'none'
					})
				} else {
					if (this.room1 == null) {

					} else {
						this.roomimg.push(this.room1)
					}
					if (this.room2 == null) {

					} else {
						this.roomimg.push(this.room2)
					}
					if (this.room3 == null) {

					} else {
						this.roomimg.push(this.room3)
					}
					if (this.room4 == null) {

					} else {
						this.roomimg.push(this.room4)
					}
					if (this.room5 == null) {

					} else {
						this.roomimg.push(this.room5)
					}
					this.roomarr = {
						'room': this.roomimg
					}
					this.fengmian = {
						'fengmian': this.CreateCoverPhoto,
					}
					this.dating = {
						'dating': this.CreateHallPhoto,
					}
					this.weishengjian = {
						'weishengjian': this.CreateToiletPhoto,
					}
					this.houseimg.push(this.fengmian)
					this.houseimg.push(this.dating)
					this.houseimg.push(this.weishengjian)
					this.houseimg.push(this.roomarr)
					// this.houseimg = {
					// 	'room': [
					// 		this.roomimg
					// 	],
					// 	'fengmian': this.fengmian,
					// 	'dating': this.dating,
					// 	'weishengjian': this.weishengjian, weishengjian,
					// }
					uni.navigateTo({
						url: '/pages/mine/owner/manage/update2/update2?houseimg=' + JSON.stringify(this.houseimg),
						success: () => {
							this.houseimg = [];
						}
					});
				}
				// console.log(this.houseimg)
			},
			/**
			* 发送请求接口
			* type: 上传图片类型: fengmian, dating, fangjian, weishengjian
			*/ 
			imageRequest: function(type, param = ''){
				//获取类型定义内容
				let infoDate = this.getUrl(type);
				
				new Request(infoDate.url).uploadImage(
					()=>{
						return infoDate.param
					},
					(res)=>{
						if(type == 'fengmian'){
							this.fengmianupload(res);
						}else if(type == 'dating'){
							this.datingupload(res);
						}else if(type == 'weishengjian'){
							this.weishengjianupload(res);
						}
						return res;
					}
				);
			},
			/**
			* 定义请求地址
			*/
			getUrl: function(type){
				let config = {};
				switch (type) {
					//封面定义请求参数和地址
					case 'fengmian':
						config = {
							'url': 'landboos/Create_House_Photo/CreateCoverPhoto',
							'param': {
								'user': 'test',
								'openid': app.globalData.openid,
							}
						};
						
						break;
					//大厅定义请求参数和地址
					case 'dating':
						config = {
							'url': 'landboos/Create_House_Photo/CreateHallPhoto',
							'param': {
								'user': 'test',
								'openid': app.globalData.openid,
							}
						};
						break;
					//房间定义请求参数和地址
					case 'bedroom':
						config = {
							'url': 'landboos/Create_House_Photo/CreateRoomPhoto',
							'param': {
								'user': 'test',
								'openid': app.globalData.openid,
							}
						};
						break;
					//卫生间定义请求参数和地址
					case 'weishengjian':
						config = {
							'url':'landboos/Create_House_Photo/CreateToiletPhoto',
							'param': {
								'user': 'test',
								'openid': app.globalData.openid,
							}
						}
						break;
						
					default:
				}
				return config;
			},			
			//封面上传图片
			fengmianupload: function(res) {
				let fengmianLength = this.CreateCoverPhoto.length;
				if(fengmianLength >= 5){
					new Request().showToast('最多五张图');
					return;
				}
				//封面对象
				let fengmian = {
					'photo_id': res.photo_id,
					'show_url': res.show_url,
					'system_url': res.system_url,
				}
				this.CreateCoverPhoto.push(fengmian);
				console.log(this.CreateCoverPhoto);
				return;
			},
			//大厅上传图片
			datingupload: function(res) {
				//大厅对象
				let dating = {
					'photo_id': res.photo_id,
					'show_url': res.show_url,
					'system_url': res.system_url,
				}
				this.CreateHallPhoto.push(dating);
				console.log(this.CreateHallPhoto);
				return;
			},
			//卫生间上传图片
			weishengjianupload: function(res) {
				//卫生间对象
				let weishengjian = {
					'photo_id': res.photo_id,
					'show_url': res.show_url,
					'system_url': res.system_url,
				}
				this.CreateToiletPhoto.push(weishengjian);
				console.log(this.CreateToiletPhoto);
				return;
			},
			
			fangjianupload1: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						// console.log(chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: app.globalData.host+'/api/renthouse/landboos/Create_House/CreateCertPhoto',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								// console.log(JSON.parse(uploadFileRes.data));
								// console.log(JSON.parse(res.data))
								// this.fangjianstate1 = JSON.parse(res.data).code
								// this.fangjianimg1 = JSON.parse(res.data).show_url
								// this.showaddimg = '1'
								// this.room1 = {
								// 	'photo_id': JSON.parse(res.data).photo_id,
								// 	'show_url': JSON.parse(res.data).show_url,
								// 	'system_url': JSON.parse(res.data).system_url,
								// }
								if (JSON.parse(res.data).code == 1) {
									uni.showToast({
										title: '图片上传成功',
										position: 'center',
										icon: 'none'
									})
									this.fangjianstate1 = JSON.parse(res.data).code
									this.fangjianimg1 = JSON.parse(res.data).show_url
									this.showaddimg = '1'
									this.room1 = {
										'photo_id': JSON.parse(res.data).photo_id,
										'show_url': JSON.parse(res.data).show_url,
										'system_url': JSON.parse(res.data).system_url,
									}
								} else if (JSON.parse(res.data).code == -3) {
									uni.showToast({
										title: '图片上传违规',
										position: 'center',
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: '图片上传失败',
										position: 'center',
										icon: 'none'
									})
								}

							}
						});
					}
				})
			},
			//房间2上传图片
			fangjianupload2: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						// console.log(chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: app.globalData.host+'/api/renthouse/landboos/Create_House/CreateCertPhoto',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								// console.log(JSON.parse(uploadFileRes.data));
								console.log(JSON.parse(res.data))
								// this.fangjianstate2 = JSON.parse(res.data).code
								// this.fangjianimg2 = JSON.parse(res.data).show_url
								// this.showaddimg = '1'
								// this.room2 = {
								// 	'photo_id': JSON.parse(res.data).photo_id,
								// 	'show_url': JSON.parse(res.data).show_url,
								// 	'system_url': JSON.parse(res.data).system_url,
								// }
								if (JSON.parse(res.data).code == 1) {
									uni.showToast({
										title: '图片上传成功',
										position: 'center',
										icon: 'none'
									})
									this.fangjianstate2 = JSON.parse(res.data).code
									this.fangjianimg2 = JSON.parse(res.data).show_url
									this.showaddimg = '1'
									this.room2 = {
										'photo_id': JSON.parse(res.data).photo_id,
										'show_url': JSON.parse(res.data).show_url,
										'system_url': JSON.parse(res.data).system_url,
									}
								} else if (JSON.parse(res.data).code == -3) {
									uni.showToast({
										title: '图片上传违规',
										position: 'center',
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: '图片上传失败',
										position: 'center',
										icon: 'none'
									})
								}

							}
						});
					}
				})
			},
			//房间3上传图片
			fangjianupload3: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						// console.log(chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: app.globalData.host+'/api/renthouse/landboos/Create_House/CreateCertPhoto',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								// console.log(JSON.parse(uploadFileRes.data));
								console.log(JSON.parse(res.data))
								// this.fangjianstate3 = JSON.parse(res.data).code
								// this.fangjianimg3 = JSON.parse(res.data).show_url
								// this.showaddimg = '1'
								// this.room3 = {
								// 	'photo_id': JSON.parse(res.data).photo_id,
								// 	'show_url': JSON.parse(res.data).show_url,
								// 	'system_url': JSON.parse(res.data).system_url,
								// }
								if (JSON.parse(res.data).code == 1) {
									uni.showToast({
										title: '图片上传成功',
										position: 'center',
										icon: 'none'
									})
									this.fangjianstate3 = JSON.parse(res.data).code
									this.fangjianimg3 = JSON.parse(res.data).show_url
									this.showaddimg = '1'
									this.room3 = {
										'photo_id': JSON.parse(res.data).photo_id,
										'show_url': JSON.parse(res.data).show_url,
										'system_url': JSON.parse(res.data).system_url,
									}
								} else if (JSON.parse(res.data).code == -3) {
									uni.showToast({
										title: '图片上传违规',
										position: 'center',
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: '图片上传失败',
										position: 'center',
										icon: 'none'
									})
								}

							}
						});
					}
				})
			},
			//房间4上传图片
			fangjianupload4: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						// console.log(chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: app.globalData.host+'/api/renthouse/landboos/Create_House/CreateCertPhoto',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								// console.log(JSON.parse(uploadFileRes.data));
								console.log(JSON.parse(res.data))
								// this.fangjianstate4 = JSON.parse(res.data).code
								// this.fangjianimg4 = JSON.parse(res.data).show_url
								// this.showaddimg = '1'
								// this.room4 = {
								// 	'photo_id': JSON.parse(res.data).photo_id,
								// 	'show_url': JSON.parse(res.data).show_url,
								// 	'system_url': JSON.parse(res.data).system_url,
								// }
								if (JSON.parse(res.data).code == 1) {
									uni.showToast({
										title: '图片上传成功',
										position: 'center',
										icon: 'none'
									})
									this.fangjianstate4 = JSON.parse(res.data).code
									this.fangjianimg4 = JSON.parse(res.data).show_url
									this.showaddimg = '1'
									this.room4 = {
										'photo_id': JSON.parse(res.data).photo_id,
										'show_url': JSON.parse(res.data).show_url,
										'system_url': JSON.parse(res.data).system_url,
									}
								} else if (JSON.parse(res.data).code == -3) {
									uni.showToast({
										title: '图片上传违规',
										position: 'center',
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: '图片上传失败',
										position: 'center',
										icon: 'none'
									})
								}

							}
						});
					}
				})
			},
			//房间5上传图片
			fangjianupload5: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						// console.log(chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: app.globalData.host+'/api/renthouse/landboos/Create_House/CreateCertPhoto',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								// console.log(JSON.parse(uploadFileRes.data));
								console.log(JSON.parse(res.data))
								// this.fangjianstate5 = JSON.parse(res.data).code
								// this.fangjianimg5 = JSON.parse(res.data).show_url
								// this.showaddimg = '1'
								// this.room5 = {
								// 	'photo_id': JSON.parse(res.data).photo_id,
								// 	'show_url': JSON.parse(res.data).show_url,
								// 	'system_url': JSON.parse(res.data).system_url,
								// }
								if (JSON.parse(res.data).code == 1) {
									uni.showToast({
										title: '图片上传成功',
										position: 'center',
										icon: 'none'
									})
									this.fangjianstate5 = JSON.parse(res.data).code
									this.fangjianimg5 = JSON.parse(res.data).show_url
									this.showaddimg = '1'
									this.room5 = {
										'photo_id': JSON.parse(res.data).photo_id,
										'show_url': JSON.parse(res.data).show_url,
										'system_url': JSON.parse(res.data).system_url,
									}
								} else if (JSON.parse(res.data).code == -3) {
									uni.showToast({
										title: '图片上传违规',
										position: 'center',
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: '图片上传失败',
										position: 'center',
										icon: 'none'
									})
								}

							}
						});
					}
				})
			},
			//添加上传图片
			addupload: function() {
				this.showaddimg = '0'
				this.addimgstate++
				if (this.addimgstate >= 6) {
					uni.showToast({
						position: 'center',
						title: '最多只能添加5个房间图片...',
						icon: 'none',
					});
				}
			},
		}
	}
</script>

<style>
	.content {
		position: relative;
	}

	/*
		图片上传样式
	*/
	.content_1 {
		margin-top: 20upx;
		margin: 0 40upx;
	}

	.upload_view {
		height: auto;
		display: flex;
		flex-direction: column;
		margin-bottom: 40upx;
		flex-wrap: wrap;
	}

	.upload_title {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #333333;
	}

	.title_line {
		height: 3upx;
		width: 120upx;
		background-color: #B3E9DC;
		margin-bottom: 20upx;
	}

	.upload_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.uploadimg_view {
		height: 120upx;
		width: 120upx;
		border-radius: 10upx;
		border: 2upx solid #BBBBBB;
		background-color: #e5e5e5;
		display: flex;
		align-items: center;
		margin-right: 40upx;
		margin-bottom: 20upx;
	}

	.uploadimg {
		width: 48upx;
		height: 48upx;
		margin: 0 auto;
	}

	/*
		下一步样式
	*/
	.content_2 {
		position: fixed;
		z-index: 999;
		right: 30upx;
		bottom: 90upx;
		height: 72upx;
		width: 250upx;
	}

	.next {
		height: 72upx;
		width: 250upx;
		border-radius: 10upx;
		background-color: #63D0D5;
		line-height: 72upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
	}
</style>
